<template>
	<view class="check-box">
		<view class="check-title">
			<text class="check-tip">请选择行业</text>
			<text class="check-info">我们会为您提供更加准确的服务</text>
		</view>
		<view class="all-trade">
			<view class="trade" v-for="(item,index) in list" :key="index" :class="index == selectedIndex ?'active-now':''" @click="changeTrade(index)">{{item.category_name}}
				<view class="checked-box iconfont" :class="index == selectedIndex ? 'iconyuan_checked ns-text-color' : 'iconyuan_checkbox'"></view>
			</view>
		</view>
		<n-button text="确定" type="default" background="$red-6" style="position:fixed;bottom: 0;left: 0;width: 100%;margin:0;border-radius: 0;" @click="checkTrade()"></n-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				selectedIndex:0,
				option:[]
			}
		},
		onLoad(option) {
			this.getCategoryList();
			this.option = option
		},
		methods: {
			getCategoryList() {
				this.$api.sendRequest({
					url: '/membercard/api/card/categoryList',
					success: res => {
						if (res.code == 0) {
							this.list = res.data;
							for(let i=0; i<res.data.length; i++) {
								if(res.data[i].category_id == this.option.category_id) {
									this.selectedIndex = i
								}
							}
						}
					}
				})
			},
			changeTrade(index) {
				this.selectedIndex = index
			},
			checkTrade() {
				this.$util.redirectTo('/otherpages/member/level/newlevel?category_id='+this.list[this.selectedIndex].category_id +'&category_name='+this.list[this.selectedIndex].category_name);
			},
		}
	}
</script>

<style>
	uni-page-body {
		background: #fff;
		padding: 0 0 40rpx 0;
	}
	.check-title {
		padding: 40rpx 30rpx 10rpx 30rpx;
	}
	.check-tip {
		color: #000000;
		font-size: 36rpx;
		font-weight: 550;
		display: block;
	}
	.check-info {
		color: #86888f;
		font-size: 30rpx;
	}
	.all-trade {
		margin-top: 120rpx;
	}
	.trade {
		margin: 40rpx 50rpx;
		font-size: 40rpx !important;
		background: #f8f8f8;
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.iconfont {
		font-size: 50rpx !important;
	}
	.active-now {
		border: 1px solid #f99da1;
		border-radius: 10rpx;
	}
	.btn {
		background: #f5222d;
		color: #fff;
		margin-top: 650rpx;
		border-radius: 10rpx !important;
		width: 666rpx;
		margin-left: 40rpx;
	}
</style>
